/**
 * MAIN CSS FOR DARK THEMING
 */

// DARK STYLES
body.dark {

  #editor .CodeMirror {
    color: var(--grey-0);

    // First the code blocks
    .cm-comment,
    .cm-fenced-code,
    .cm-inline-math {
      color: var(--grey-0);
    }

    .cm-fenced-code {
      &.cm-comment {
        color: var(--grey-3);
      }

      &.cm-attribute {
        color: var(--blue-0);
      }

      &.cm-builtin {
        color: var(--blue-0);
      }

      // Some modes use this for keywords
      &.cm-string {
        color: var(--green-0);
      }

      &.cm-string-2 {
        color: var(--gold-selection-dark);
      }

      &.cm-variable {
        color: var(--grey-1);
      }

      &.cm-variable-2 {
        color: var(--blue-0);
        font-weight: bold;
      }

      &.cm-keyword {
        color: var(--purple-selection);
      }

      &.cm-property {
        color: var(--orange-1);
      }

      &.cm-atom {
        color: var(--green-selection-dark);
      }

      &.cm-number {
        color: var(--blue-0);
      }

      &.cm-positive {
        color: var(--green-1);
      }

      &.cm-negative {
        color: var(--red-2);
      }
    }

    // Make the block cursor visible in dark mode as well
    .CodeMirror-overwrite .CodeMirror-cursor,
    &.CodeMirror.cm-fat-cursor .CodeMirror-cursor {
      background-color: var(--c-primary-shade);
    }

    // HTML tags
    .cm-tag {
      color: var(--orange-2);
    }

    .cm-attribute {
      color: var(--blue-3);
    }

    .cm-bracket {
      color: var(--grey-1);
    }

    .cm-string {
      color: var(--green-0);
    }

    // TYPOGRAPHY
    .cm-formatting-header-1,
    .cm-formatting-header-2,
    .cm-formatting-header-3,
    .cm-formatting-header-4,
    .cm-formatting-header-5,
    .cm-formatting-header-6,
    .cm-url {
      color: var(--c-primary-shade);
    }

    // Style the code block line wrapper classes
    .code-block-line {
      background-color: #333;
    }

    .code-block-first-line {
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
    }

    .code-block-last-line {
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
    }

    /* LISTS */
    .cm-formatting-list-ul,
    .cm-formatting-list-ol {
      color: var(--c-primary-shade);
    }

    .cm-spell-error {
      text-decoration-color: var(--bg-error);
    }

    .cm-zkn-tag,
    .cm-zkn-id,
    .cm-zkn-link,
    .cm-zkn-link-formatting {
      color: var(--c-primary-shade);
    }

    // .cma { color: var(--c-primary-shade); }
    .cma {
      color: var(--c-primary);
    }

    // citations
    .citeproc-citation {
      background-color: var(--grey-5);

      &.error {
        color: var(--bg-error);
      }
    }

    // Mermaid charts
    .mermaid-chart {

      // THEMING
      // For now, a simple background
      // for easy recognition
      svg {
        background-color: var(--grey-4);
      }
    }

    .cm-formatting-escape {
      color: var(--grey-0);
    }

    // YAML Frontmatter indicator -- dark version
    .cm-yaml-frontmatter-start {
      color: inherit;

      &::after {
        color: rgb(80, 80, 80);
        background-color: rgb(40, 40, 40);
      }
    }

    .CodeMirror-foldmarker {
      background-color: var(--grey-5);
      color: var(--grey-2);

      &:hover {
        background-color: var(--grey-4);
      }
    }

    .CodeMirror-guttermarker-subtle {
      color: #464646;
    }

    // The active line when in typewriter mode
    .CodeMirror-linebackground.typewriter-active-line {
      border-top: 2px solid @grey-3;
      border-bottom: 2px solid @grey-3;
      background-color: @grey-6;
    }
  }

  .CodeMirror-focused .CodeMirror-selected {
    background-color: var(--selection-dark);
  }

  .CodeMirror .CodeMirror-selected {
    background-color: var(--selection-dark);
  }

  .CodeMirror-cursor {
    background: var(--c-primary-shade);
  }

  // Hint related stuff. Hints mustn't be scoped by .CodeMirror as they are
  // attached to document.body, not the editor
  .CodeMirror-hints {
    box-shadow: 2px 3px 5px rgba(0, 0, 0, .2);
    border: 1px solid var(--grey-5);

    background: var(--grey-7);

    li.CodeMirror-hint {
      color: var(--grey-0);

      &:hover {
        background-color: var(--grey-5);
      }
    }

    li.CodeMirror-hint-active {
      background-color: var(--c-primary-shade);
      color: var(--grey-0);

      &:hover {
        background-color: var(--c-primary);
      }
    }

    .cm-hint-colour {
      color: var(--grey-3);
      background-color: var(--grey-5);
    }
  }

  // Custom styling for the various editors across the app
  // -----------------------------------------------------------------------------
  #editor .CodeMirror {

    // Code background
    .cm-comment:not(.cm-formatting):not(.cm-fenced-code) {
      background-color: var(--grey-5);
    }

    // cm-comment should be ignored inside code blocks
    .code-block-line {
      // Retain monospaced font from editor.css
      font-family: Consolas, 'Inconsolata', Menlo, monospace;

      .cm-comment {
        background-color: transparent !important;
        padding: 0 !important;
      }
    }
  }

  .table-helper-align-button-container,
  .table-helper-remove-button-container,
  .table-helper-add-button {
    background-color: white;
  }
}
